<template>
  <div>
    <el-dialog
      title="机器订单列表"
      :visible.sync="isShow"
      width="52%"
      >
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column
          align="center"
          prop="model"
          label="型号"
          width="300">
        </el-table-column>
        <el-table-column
          align="center"
          prop="machineNo"
          label="机器编号"
          width="300">
        </el-table-column>
        <el-table-column
          align="center"
          prop="status"
          label="机器状态"
          width="300">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="scope.row.status==='0'">正常</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status==='1'">维修中</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status==='2'">使用中</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status==='3'">未激活</el-button>
          </template>
        </el-table-column>
           <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="openRepairs(scope.row)">报修</el-button>
              <el-button type="success" size="mini" @click="repairOpen(scope.row)">查看记录</el-button>
            </template>
           </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="isShow = false">取 消</el-button>
    <el-button type="primary" @click="isShow = false">确 定</el-button>
  </span>
    </el-dialog>
<!--    报修弹框-->
    <el-dialog title="报修单" :visible.sync="isRepairs" width="52%" @close="RepairsClose">
      <el-form label-width="124px" :model="addFormData" :rules="rules" ref="ruleForm"  :inline="true" class="demo-form-inline">
        <el-form-item label="维修编号" prop="repairNo">
          <el-input v-model="addFormData.repairNo" placeholder="请输入维修编号"></el-input>
        </el-form-item>
        <el-form-item label="机器编号" prop="machineNo">
          <el-input v-model="addFormData.machineNo" placeholder="请输入机器编号"></el-input>
        </el-form-item>
        <el-form-item label="租赁销售订单编号">
          <el-input v-model="addFormData.orderNo" placeholder="请输入租赁销售订单编号"></el-input>
        </el-form-item>
        <el-form-item label="维修类型" prop="repairType">
          <el-radio-group v-model="addFormData.repairType">
            <el-radio :label="'0'">维修</el-radio>
            <el-radio :label="'1'">退回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="维修金额">
          <el-input v-model="addFormData.repairAmount" placeholder="请输入维修金额"></el-input>
        </el-form-item>
        <el-form-item label="维修描述" prop="repairDescription" style="display: block">
          <el-input type="textarea" v-model="addFormData.repairDescription" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isRepairs=false" >取消</el-button>
        <el-button type="primary" @click="btnOk" v-if="number===0">确定</el-button>
      </span>
    </el-dialog>
<!--   查看订单机器维修记录-->
    <el-dialog title="机器维修记录" :visible.sync="isRepairsList" >
         <el-table :data="list"
                   border
                   style="width: 100%">
           <  <el-table-column type="selection" align="center" width="55"></el-table-column>
           <el-table-column prop="repairNo" label="维修编号" align="center" ></el-table-column>
           <el-table-column prop="machineNo" label="机器编号" align="center" ></el-table-column>
           <el-table-column prop="orderNo" label="租赁销售订单编号" align="center" ></el-table-column>
           <el-table-column prop="repairType" label="维修类型" align="center" >
             <template slot-scope="scope">
               <el-tag v-if="scope.row.repairType==0">维修</el-tag>
               <el-tag v-if="scope.row.repairType==1">退回</el-tag>
             </template>
           </el-table-column>
           <el-table-column prop="repairAmount" label="维修金额" align="center" ></el-table-column>
           <el-table-column fixed="right" label="操作" align="center" >
             <template slot-scope="scope">
               <el-button  type="text" size="small" @click="detailsHandler(scope.row.id)">查看详情</el-button>
               <el-button  type="text" size="small" @click="updateHandler(scope.row.id,1)">修改</el-button>
               <el-button  type="text" size="small" @click="delhandler(scope.row.id)">删除</el-button>

             </template>
           </el-table-column>
         </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {addRepairApi,detailsRepairApi,updateRepairApi,repairListApi,delRepairApi} from '@/api/module/repair'
export default{
  name:'orderList',
   data(){
     return {
       isShow:false,
       tableData:[],
       isRepairs:false,//报修弹框
       addFormData:{
         repairNo:'',
         machineId:'',//机器id
         machineNo:'',
         orderNo:'',
         repairType:'',
         repairDescription:'',
         repairAmount:'',
         orderId:''
       },
       rules:{
         repairNo:[
           { required: true, message: '请输入维修编号', trigger: 'blur' },
         ],
         repairType:[
           { required: true, message: '请输入维修类型', trigger: 'change' },
         ],
         machineNo:[
           { required: true, message: '请输入机器编码', trigger: 'blur' },
         ],
         repairDescription:[
           { required: true, message: '请输入维修描述', trigger: 'blur' },
         ]
       },
       isRepairsList:false,//机器维修记录
       list:[],
       id:'',
       number:0
     }
   },
  created() {
  },
  methods:{
    //新增维修单
    openRepairs(val){
      console.log(val)
      this.isRepairs=true
    // 生成维修单编号
       this.addFormData.repairNo=this.setOrderNo()
      this.addFormData.machineNo=val.machineNo
      // this.addFormData.orderId=val.id
    },
    setOrderNo(){
      var date = new Date();
      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }

      let round = Math.floor(Math.random() * (999 - 100)) + 100;
      var currentFormatDate = `${year}${month}${day}`;
      return "WXD"+currentFormatDate+round;
    },
    async btnOk(){
      try{
        await this.$refs.ruleForm.validate()
         if(this.addFormData.id){
           await updateRepairApi(this.addFormData)
         }else{
           await  addRepairApi(this.addFormData)
         }
         this.$message.success('操作成功')
        this.isRepairs=false
      }catch (error){
        console.log(error)
      }
    },
  //  增加弹框关闭
    RepairsClose(){
      this.addFormData={
        repairNo:'',
        machineId:'',//机器id
        machineNo:'',
        orderNo:'',
        repairType:'',
        repairDescription:'',
        repairAmount:'',
        orderId:''
      }
    },
  //详情弹框
    async repairOpen(val){
       this.isRepairsList=true
    //  获取该订单该机器维修记录
   let res= await repairListApi({machineNo:val.machineNo,orderId:this.id})
      console.log(res)
      this.list=res.rows
    },
  //  查看维修单详情
    async detailsHandler(id,number){
    // 弹框打开
      this.isRepairs=true
    let res=await detailsRepairApi(id)
      this.addFormData=res.data
    // 隐藏确认按钮
this.number=number
    },
  // 修改按钮
    async updateHandler(id){
      this.isRepairs=true
      let res=await detailsRepairApi(id)
      this.addFormData=res.data
      this.number=0
    },
  //  删除按钮
    async delhandler(id){
      await this.$confirm('是否确认删除')
      await delRepairApi(id)
      this.$message.success('删除成功')
    }
  }
}
</script>
